<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">优惠活动</el-breadcrumb-item>
      <el-breadcrumb-item>年度推荐</el-breadcrumb-item>
    </el-breadcrumb>
    <ul>
      <li v-for="(item, index) in recommendList" :key="index">
        <img
          :src="item.imgUrl"
          alt=""
          width="326px"
          height="206px"
          style="margin-right: 50px; filter: grayscale(1)"
        />
        <div>
          <strong>{{ item.strong }}</strong>
          <p>
            <i class="iconfont icon-shijian1"></i>
            {{ item.p }}
          </p>
          <el-button type="info" @click="handleJump(index)">活动详情</el-button>
        </div>
        <i
          class="iconfont icon-poll_finished"
          style="font-size: 64px; color: #7f7f7f; flex: 1; text-align: right"
        ></i>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      recommendList: [
        {
          imgUrl: require("@/assets/images/AnnualRecommendation-1.png"),
          strong: "2021武汉街头艺术节",
          p: "2021年10月1日 - 10月7日",
        },
        {
          imgUrl: require("@/assets/images/AnnualRecommendation-2.png"),
          strong: "2021武汉全明星儿童节",
          p: "2021年5月1日 - 6月1日",
        },
        {
          imgUrl: require("@/assets/images/AnnualRecommendation-3.png"),
          strong: "2021武汉国风次元节",
          p: "2021年3月27日 - 4月18日",
        },
        {
          imgUrl: require("@/assets/images/AnnualRecommendation-4.png"),
          strong: "2021武汉乐园灯光节",
          p: "2021年1月1日 - 2月28日",
        },
      ],
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    handleJump(index) {
      if (index == 0) {
        window.open("http://wh.happyvalley.cn/2021jtysj/index1.html");
      } else if (index == 1) {
        window.open("http://wh.happyvalley.cn/2021etj/index.html?v=1.01");
      } else if (index == 2) {
        window.open("http://wh.happyvalley.cn/2021cyj/index.html");
      } else if (index == 3) {
        window.open("http://wh.happyvalley.cn/2020dgj_4/index.html?v=1.11");
      }
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-breadcrumb {
  font-size: 21px;
  line-height: 2;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

li {
  width: 900px;
  background-color: #fff;
  padding: 30px 50px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed #e0e0e0;
  margin: auto;

  strong {
    font-size: 20px;
    color: #909399;
  }

  p {
    color: #ff8a00;
    display: flex;
    align-items: center;
    margin: 20px 0 30px;

    i {
      font-size: 32px;
    }
  }
}
</style>
